<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.roleName" placeholder="请输入角色名称" clearable  @keyup.enter.native="handleFilter" style="width:20% ;margin-right: 15px" />
      <el-button v-waves type="primary" class="filter-item" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves type="primary" class="filter-item" icon="el-icon-refresh-right" @click="handleReset">
        重置
      </el-button>
      <el-button type="primary" class="filter-item" icon="el-icon-plus" @click="handleCreate">
        增加
      </el-button>
      <el-button v-waves  type="primary" class="filter-item"  icon="el-icon-download" @click="handleDownload">
<!--        <svg-icon icon-class="excel" style="margin-right: 5px" />-->
        导出
      </el-button>
      <el-button v-waves  type="primary" class="filter-item"  icon="el-icon-select" @click="handleDownload">
        <!--        <svg-icon icon-class="excel" style="margin-right: 5px" />-->
        用户分配
      </el-button>

      <el-button type="danger" plain class="filter-item" icon="el-icon-delete" @click="handleDelete">
        删除
      </el-button>

    </div>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >

<!--      <el-table-column label="创建时间" min-width="100px" prop="createTime" sortable="custom" >-->
        <el-table-column type="selection" width="35" />
        <el-table-column label="角色编码" prop="roleCode" />
        <el-table-column label="角色名称" prop="roleName" />
        <el-table-column label="角色描述" show-overflow-tooltip prop="roleDescription" />
        <el-table-column label="创建时间"  prop="createTime"  min-width="100px"  sortable="custom" />


      <el-table-column label="操作" align="center" min-width="130px">
        <template slot-scope="{row,$index}">
          <el-button type="text" @click="handleUpdate(row)">
            <i class="el-icon-edit-outline" />编辑
          </el-button>
          <el-popover :ref="'popover-' + row.id" placement="top" width="160" title="删除" trigger="click">
            <div>
              <el-button size="mini" @click="$refs[`popover-` + row.id].doClose()">取消</el-button>
              <el-button type="primary" size="mini" @click="$refs[`popover-` + row.id].doClose();handleDelete(row,$index)">确定</el-button>
            </div>
            <el-button slot="reference" type="text" style="margin-left: 10px">
              <i class="el-icon-delete" />删除
            </el-button>
          </el-popover>
          <el-button type="text" style="margin-left: 10px" @click="handleAuthorizeMenu(row.id)">
            <i class="el-icon-postcard" />授权菜单
          </el-button>
          <el-button type="text" style="margin-left: 10px" @click="handleAuthorizeMenuButton(row.roleCode)">
            <i class="el-icon-postcard" />授权功能
          </el-button>
        </template>
      </el-table-column>
    </el-table>



    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />

<!--    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">-->
<!--      <el-form ref="dataForm" :rules="rules" :model="temp" :label-position="labelPosition" label-width="90px" style="width: 100%">-->
<!--        <el-form-item :label="$t('sysrole.roleCode')" prop="roleCode">-->
<!--          <el-input v-model="temp.roleCode" :placeholder="$t('common.enter')" :disabled="dialogStatus==='update'" maxlength="32" clearable />-->
<!--        </el-form-item>-->
<!--        <el-form-item :label="$t('sysrole.roleName')" prop="roleName">-->
<!--          <el-input v-model="temp.roleName" :placeholder="$t('common.enter')" maxlength="64" clearable />-->
<!--        </el-form-item>-->
<!--        <el-form-item :label="$t('sysrole.roleDescription')" prop="roleDescription">-->
<!--          <el-input v-model="temp.roleDescription" type="textarea" :placeholder="$t('common.enter')" maxlength="256" clearable />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">-->
<!--          {{ $t('common.cancel') }}-->
<!--        </el-button>-->
<!--        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">-->
<!--          {{ $t('common.confirm') }}-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

<!--    <el-dialog :title="$t('sysrole.authorize-menu')" :visible.sync="menuTreeDialogFormVisible">-->
<!--      <el-tree ref="menuTreeRef" :data="menuTree" show-checkbox node-key="id" highlight-current :props="defaultProps" />-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="menuTreeDialogFormVisible = false">-->
<!--          {{ $t('common.cancel') }}-->
<!--        </el-button>-->
<!--        <el-button type="primary" @click="createAuthorizeMenu()">-->
<!--          {{ $t('common.confirm') }}-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

<!--    <el-dialog :title="$t('sysrole.authorize-buttontip')" :visible.sync="menuButtonTreeDialogFormVisible">-->
<!--      <el-tree ref="menuButtonTreeRef" :data="menuButtonTree" show-checkbox node-key="key" highlight-current :props="defaultProps" />-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="menuButtonTreeDialogFormVisible = false">-->
<!--          取消-->
<!--        </el-button>-->
<!--        <el-button type="primary" @click="createAuthorizeMenuButton()">-->
<!--          确定-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

  </div>
</template>

<script>
  // import { querySysRole, querySysMenuTree, queryMenuIdByRoleId, authorizeMenuToRole, querySysMenuButtonTree, queryMenuButtonByRoleCode, authorizeMenuButtonToRole, addSysRole, updateSysRole, deleteSysRole, exportSysRole } from '@/api/admin'
  // import waves from '@/directive/waves' // waves directive
  import Pagination from '../../components/Mypagination' // secondary package based on el-pagination
  // import qs from 'qs'
  // import { saveAs } from 'file-saver'

  export default {
    name: 'SysRole',
    components: { Pagination },
    // directives: { waves },
    data() {
      return {
        listLoading: true,
        tableKey: 0,
        total:4,
        list:[
          {
            id:0,
            roleCode:'admin',
            roleName:'系统管理员',
            roleDescription:"主要管权限分配",
            createTime:'2021.6.10',
          },
          {
            id:1,
            roleCode:'averageManager',
            roleName:'普通设备管理员',
            roleDescription:"录入设备、状态记录、报修申请、变更申请、报废申请、检查设备状态",
            createTime:'2021.6.11',
          },
          {
            id:2,
            roleCode:'advanceManager',
            roleName:'高级设备管理员',
            roleDescription:"审批报废申请、审批报修申请",
            createTime:'2021.6.12',
          },
          {
            id:3,
            roleCode:'responsibleManager',
            roleName:'设备负责人',
            roleDescription:"审批变更表单",
            createTime:'2021.6.13',
          },

        ],
        listQuery2:{

        },
        listQuery: {
          currentPage: 1,
          pageSize: 10,
          roleName: undefined,
          // sorter: 'createTime_descend'
        },
        temp: {
          id: undefined
        },
        multipleSelection: [],
        menuTreeDialogFormVisible: false,
        menuTree: [],

        menuButtonTree: [],
        menuButtonTreeDialogFormVisible: false,
        dialogFormVisible: false,
        dialogStatus: '',
        rules: {
          roleCode: [{ required: true, validator: this.checkRoleCode, trigger: ['blur', 'change'] }],
          roleName: [{ required: true, validator: this.checkRoleName, trigger: ['blur', 'change'] }]
        },
        downloadLoading: false
      }
    },
    created() {
      if (window.innerWidth < 700) {
        this.labelPosition = 'top'
      }
      // this.getList()
    },

  }
</script>
